<template>
	<div class="broad-list" @scroll="handleScroll" ref='myScroll'>
		<ul :style="{paddingTop: lineTopHeight +'px',paddingBottom: lineBottomHeight +'px'}" ref='mainScroll'>
			<li v-for="(item,index) in previewList" @contextmenu="contextmenu($event,item)" @click='$emit("toChat",item)' :key='index+"pre_item"'>
				<div style='margin-right: 1em;'>
					<img :src="item.type=='msg'?`static/image/home/person_${item.gender==1?1:2}.png`:'static/image/home/chat/broadimg.png'" style='width: 3em;height: 3em;' />
				</div>
				<div style='width: 180px;'>
					<div style='display: flex;flex-grow: 1;justify-content: space-between;'>
						<div style='font-weight: bold;'>
							{{item.name}}
						</div>
						<div style='color: #888888;'>
							{{item.time | setTime}}
						</div>
					</div>
					<div style='color: #888888;'>{{item.value}}</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'vue-list',
		props: {
			list: {
				type: Array,
				required: true,
				default: [],
				twoWays: true
			},
			height: {
				type: Number,
				default: 59
			},
			userName: {
				type: String,
				default: ''
			},
			canScroll: {
				type: Boolean,
				default: true
			},
			dispatchData: {
				type: Function
			}
		},
		data() {
			return {
				lastScrollTop: null,
				distance: 59,
				lineTopHeight: 0,
				lineBottomHeight: 0,
				canLoadmore: true,
				previewList: [],
				displayCount: 0,
				offset: 0,
				listHeight:0
			}
		},
		mounted() {
			this.initData();
			this.handleScroll();
		},
		methods: {
			getLi(item, el) {
				if(el.tagName == 'LI') {
					this.offset = el.offsetTop
					this.$emit('showSessionMinor', {
						item: item,
						offset: this.offset - this.$refs.myScroll.scrollTop + 10
					})
				} else {
					this.getLi(item, el.parentNode)
				}
			},
			contextmenu(e, item) {
				this.getLi(item, e.target)
			},
			checked(item) {
				item.check = !item.check
				console.log(item.check)
				if(item.check) {
					this.$store.state.groupChat.delGroup = true
				} else {
					for(let i in this.list) {
						if(this.list[i].check) {
							this.$store.state.groupChat.delGroup = true
							break;
						} else {
							this.$store.state.groupChat.delGroup = false
						}
					}
				}
				this.$forceUpdate()
			},
			initData() {
				// init all data
				console.log(this.height)
				console.log(this.$el)
				this._rowsInWindow = Math.ceil(this.$el.offsetHeight / this.height)
				this._above = this._rowsInWindow * 2
				this._below = this._rowsInWindow
				this._max = this._rowsInWindow * this.height
				console.log(this._rowsInWindow)
				console.log(this._above)
				console.log(this._below)
				console.log(this._max)
			},
			handleScroll() {
				this.$emit('setFalse')
				let _scrollTop = this.$el.scrollTop
				let _height = this.$el.querySelectorAll('ul')[0].offsetHeight
				let _contentHeight = this.$el.offsetHeight

				// Counts the number of rows on the current screen
				if(_scrollTop / this.height - Math.floor(_scrollTop / this.height) > 0.5) {
					this.displayCount = Math.ceil(_scrollTop / this.height);
				} else {
					this.displayCount = Math.floor(_scrollTop / this.height);
				}

				// if the maximum height is exceeded, reset the previewList
				if(this.lastScrollTop === null || Math.abs(_scrollTop - this.lastScrollTop) > this._max) {
					this.lastScrollTop = _scrollTop;
				} else {
					return;
				}

				// get from and to count
				let _from = parseInt(_scrollTop / this.height) - this._above;
				if(_from < 0) _from = 0;
				console.log(_from)
				let _to = _from + this._above + this._below + this._rowsInWindow;
				if(_to > this.list.length) _to = this.list.length;
				console.log(_to)
				this.from = _from;
				this.to = _to;

				// set top height and bottom height
				this.lineTopHeight = _from * this.height;
				this.lineBottomHeight = (this.list.length - _to) * this.height;

				// dispatch data
				if(typeof this.dispatchData === 'function') {
					this.dispatchData(this)
				}

				this.resetPreviewList(_from, _to);
			},
			resetPreviewList(from, to) {
				// reset previewList
				this.previewList = [];
				for(; from < to; from++) {
					this.previewList.push(this.list[from])
				}
			}
		},
		components: {},
		created(){
			
		}
	}
</script>